<template>
	<view class="new-li-item">
		<view class="" v-for="(item,index) in brandList" :key="index" >
			<view class="new-li-item_title">{{ item.initial }}{{ item.brandName }}</view>
			<view class="car-list" v-for="(item1,index1)  in item.seriesList" :key="index1">
				<view class="car-list-item" @click="goNewCarDetail(item1.seriesId)">	
			<!-- 	<view class="car-list-item">	 -->
					<view class="item-img"><image :src="item1.seriesLogo ? https + item1.seriesLogo : '../../static/no_carpicture.jpg' " mode="scaleToFill"></image></view>
					<view class="item-text">
						<view class="item-text-title">{{item1.seriesName}}</view>
						<view class="item-text-title2">指导价：{{item1.guidePriceMin}} - {{item1.guidePriceMax}}万</view>
						<view class="item-text-title3">纯电续航：{{item1.rechargeMileageMin}}<text v-if="item1.rechargeMileageMin!=item1.rechargeMileageMax">-{{item1.rechargeMileageMax}}</text>KM</view>
					</view>
			
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"newCarItem",
		props:{
			brandList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				https: getApp().globalData.picturePath,
			};
		},
		methods:{
			goNewCarDetail(seriesId){
				console.log(seriesId)
				uni.navigateTo({
					url: '/pagesA/buyCar/newCarDetail?seriesId=' + seriesId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.new-li-item{
		.new-li-item_title{
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			text-align: left;
			font-size: 32rpx;
			color: #333;
			background-color: #f7f7f7;
		}
		.car-list{
			background-color: #fff;
			.car-list-item{
				border-bottom: 2rpx solid #f7f7f7;
				padding: 24rpx 60rpx 24rpx 24rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-img{
					width: 180rpx;
					height: 135rpx;
					border-radius: 8rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.item-text{
					flex: 1;
					margin-left: 24rpx;
					.item-text-title{
						font-size: 30rpx;
						font-weight: bolder;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.item-text-title2{
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #999;
					}
					.item-text-title3{
						margin-top: 10rpx;
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}
	}

</style>
